<template>
	<view class="open_result">
		<view class="title">盲盒</view>
		<image :src="props.data.cover" class="cover"></image>
		<view class="name">
			恭喜你获得:
			<text>{{props.data.name}}</text>
		</view>
		<view class="btn_view">
			<view @click="close">知道了</view>
		</view>
	</view>
</template>

<script setup>
	const props = defineProps({
		data: Object
	});
	const emit = defineEmits(["reload"]);
	const close = () => emit("reload");
</script>

<style scoped lang="scss">
	.open_result {
		width: 600rpx;
		border-radius: 20rpx;
		padding: 0 44rpx 40rpx;
		box-sizing: border-box;
		background: #2F2F2F;

		.title {
			height: 106rpx;
			line-height: 106rpx;
			text-align: center;
			color: #FFFFFF;
			font-size: 28rpx;
			font-weight: bold;
		}

		.cover {
			display: block;
			width: 480rpx;
			height: 480rpx;
			border-radius: 20rpx;
			margin: 0 auto;
			background: #444444;
		}

		.name {
			color: #FFFFFF;
			font-size: 32rpx;
			padding: 30rpx 0;
			box-sizing: border-box;

			text {
				font-size: 40rpx;
			}
		}

		.btn_view {
			display: flex;
			justify-content: center;

			view {
				width: 240rpx;
				height: 78rpx;
				line-height: 78rpx;
				text-align: center;
				color: #333333;
				font-size: 28rpx;
				font-weight: bold;
				border-radius: 20rpx;
				background: #DDF247;
			}
		}
	}
</style>